<template>
  <div>
    <div class="line-map-wrap">
      <lineMap  :center=center
                :line-symbol-color=lineSymbolColor
                :line-symbol-width=lineSymbolWidth
                :line-symbol-style=lineSymbolStyle
                :paths="paths"
                @graphicJSON=graphicJSON></lineMap>
    </div>
    <input type="color" v-model=lineSymbolColor>{{lineSymbolColor}}
    <input type="text" v-model=lineSymbolWidth>{{lineSymbolWidth}}
    <input type="text" v-model=lineSymbolStyle>{{lineSymbolStyle}}
    <button @click="addClick">新增</button>
    <button @click="searchClick">预览</button>
  </div>
</template>

<script>
  import lineMap from "./lineMap/lineMap.vue";
  export default {
    name: "lineMapDialog",
    data(){
      return {
        center: [114.21868761726246, 30.584733852070247],
        data:[],
        lineSymbolColor: '#8A2BE2',
        lineSymbolWidth: '4',
        lineSymbolStyle: 'solid',
        objectId: null,
        searchObjectId: 0,
        paths: null,          // 图形的路径
        length: null,         // 距离
      }
    },
    components: {
      lineMap
    },
    methods:{
      graphicJSON(json){
        json.attributes["Name"] = 'name';
        this.data = [
            {
              "geometry": json.geometry,
              "attributes":json.attributes
            }
          ];
        //console.log(JSON.stringify(this.data))
      },
      addClick(){
        if(this.data){
          this.$axios({
            method: 'post',
            url: mapFeatureServer + '1/addFeatures', // 1 线 2 圈
            data: 'f=json&features='+JSON.stringify(this.data),
            headers: {"Content-Type": "application/x-www-form-urlencoded"}
          }).then( res => {
            this.objectId = res.data.addResults[0].objectId;
            //console.log(this.objectId)
            // alert('新增成功'+this.objectId);
          })
        }
        else {
          alert("请先画线");
        }
      },
      searchClick(){
      // 8080
      // [{"geometry":{"spatialReference":{"wkid":4326},"paths":[[[114.22015812416404,30.586023519862792],[114.21819744858571,30.584234165259023],[114.21819744858571,30.584234165259023]]]},"attributes":{"Name":"name"}}]
      //  where=&objectIds=8080&time=&geometry=&geometryType=esriGeometryPolyline&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&f=pjson
        this.$axios({
          method: 'post',
          url: mapFeatureServer + '1/query',
          data: 'where=&objectIds='+'9250'+'&time=&geometry=&geometryType=esriGeometryPolyline&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&f=pjson',
          headers: {"Content-Type": "application/x-www-form-urlencoded"}
        }).then(res => {
          this.paths = res.data.features[0].geometry.paths;
          this.center = [ this.paths[this.paths.length -1][0], this.paths[this.paths.length -1][1] ];

          //console.log(this.paths)
        })
      }

    },
    created(){
      this.searchClick()
    },
    mounted(){

    }

  }
</script>

<style scoped>
  .line-map-wrap {
    width: 600px;
    height: 600px;
  }
</style>
